import QtQuick 2.5
import QtQuick.Controls 1.4
import "./MyPainter.js" as PPainter

Item {
    id:root
    //时间尺的长度，每秒50时个像素记录
    property int music_pad_width:(music_duration)*50
    //当前时间尺的游标位置
    property var current_position:0
//    property var cpos;
//    property bool edittingPindex:false
    //当前编辑节点
    property int current_index:0
    focus: true

    Behavior on current_position {
        PropertyAnimation{
            properties:"current_position"
            duration: 10
        }
    }


    function setPosition(pos){
        var c=pos/(music_duration*1000);
        current_position=c*music_pad_width;
    }
    function setDuration(duration){
        music_duration=duration/1000;
    }
    function drawAmplitude(amp){
        PPainter.drawAmplitude(canvas2,current_position,amp);
        canvas2.requestPaint();
    }
    function clearDatas(){
        datasModel.clear();
    }

    Keys.onPressed: {

        if(event.key==Qt.Key_Space){
            if(playinyState){
                AudioData.pauseMusic();
//                playbnt.source="qrc:/imgs/play.png";
                playinyState=false;
            }
            else {
                AudioData.playMusic();
//                playbnt.source="qrc:/imgs/pause.png";
                playinyState=true;
            }
        }
        else if(event.key===Qt.Key_F){
            var r=Math.round(Math.random()*7);
            console.log(r);
            datasModel.append({
                                  "mode":1,
                                  "pos":current_position,
                                  "length":1,
                                  "side":0,
                                  "pindex":0,
                                  "selected":false
                              });
//            refreshImage1(datasModel.count-1);
        }
        else if(event.key===Qt.Key_G){
            var r=Math.round(Math.random()*7);
            console.log(r);
            datasModel.append({
                                  "mode":1,
                                  "pos":current_position,
                                  "length":1,
                                  "side":0,
                                  "pindex":1,
                                  "selected":false
                              });
//            refreshImage1(datasModel.count-1);
        }
        else if(event.key===Qt.Key_H){
            var r=Math.round(Math.random()*7);
            console.log(r);
            datasModel.append({
                                  "mode":1,
                                  "pos":current_position,
                                  "length":1,
                                  "side":0,
                                  "pindex":2,
                                  "selected":false
                              });
//            refreshImage1(datasModel.count-1);
        }
        else if(event.key===Qt.Key_J){
            var r=Math.round(Math.random()*7);
            console.log(r);
            datasModel.append({
                                  "mode":1,
                                  "pos":current_position,
                                  "length":1,
                                  "side":0,
                                  "pindex":3,
                                  "selected":false
                              });
//            refreshImage1(datasModel.count-1);
        }
    }


    onCurrent_positionChanged: {
        if(playinyState){
            flic.contentX=current_position;
//            posSeeker.x=current_position+50;
        }
    }


    Rectangle{
        anchors.fill: parent
        Column{
            //music visual data
            Item{
                width: root.width
                height: root.height/2
//                z:3

                Flickable{
                    anchors.fill: parent
                    contentWidth: pad.width
                    contentHeight: pad.height
                    id:flic
                    Item{
                        id:pad
                        width: music_pad_width+100
                        height:flic.height
                        Rectangle{
                            z:2
                            width: music_pad_width+100
                            height: 80
                            color:"#77a699"
                            Rectangle{
                                width: 2
                                height: flic.height
                                border.width: 1
                                border.color: "#fadd45"
                                color:"#fadd45"
                                id:tagIndexer
                                visible: edittingPindex
                                z:5
                                x:datasModel.count===0?50:datasModel.get(current_index).pos+50
                            }


                            Canvas{
                                id:canvas1
                                anchors.fill: parent
                                Repeater{
                                    model: datasModel
                                    delegate: Rectangle{
                                        id:tagItem
                                        height: 12
                                        width: /*datasModel.get(index).*/mode===1?height:/*datasModel.get(index).*/length
                                        Component.onCompleted: {
                                            console.log(length,"dd",mode)
                                        }
                                        onWidthChanged: {
                                            console.log(width);
                                        }

                                        x:{
                                            if(datasModel.get(index).mode===1)
                                                return 50+datasModel.get(index).pos-6;
                                            else
                                                return 50+datasModel.get(index).pos;
                                        }

                                        y:{
                                            if(datasModel.get(index).mode===1)
                                                return 15;
                                            else
                                                return 45;
                                        }

                                        radius: datasModel.get(index).mode===1?6:0
                                        color:datasModel.get(index).side===0?"#12dfaa":"#dfaa78"
                                        border.width: 1
                                        border.color: "#666666"
                                        z:datasModel.get(index).mode===1?1:2

                                        MouseArea{
                                            anchors.fill: parent
                                            drag.target: tagItem
                                            drag.axis: Drag.XAxis
                                            drag.maximumX: canvas1.width-50
                                            drag.minimumX: 50
                                            onReleased: {
                                                if(datasModel.get(index).mode===1){
                                                    datasModel.setProperty(index,"pos",parent.x+6-50);
                                                }
                                                else
                                                    datasModel.setProperty(index,"pos",parent.x-50);
                                            }
                                            onDoubleClicked: {
                                                datasModel.remove(index);
                                            }
                                        }
                                        Rectangle{
                                            width: 1
                                            height: datasModel.get(index).mode===1?65-12+pad.height-80:35-12+pad.height-80
                                            color:"#4512aafa"
                                            x:datasModel.get(index).mode===1?parent.width/2:1
                                            anchors.top: parent.bottom
                                        }

                                        Rectangle{
                                            width: 1
                                            height: datasModel.get(index).mode===1?65-12+pad.height-80:35-12+pad.height-80
                                            color:"#4512aafa"
                                            anchors.right: parent.right
                                            visible: datasModel.get(index).mode===2;
                                            anchors.top: parent.bottom
                                            anchors.rightMargin: 1
                                        }

                                        //length control
                                        Rectangle{
                                            width: 10
                                            height: parent.height-2
                                            anchors.verticalCenter: parent.verticalCenter
                                            Rectangle{
                                                width:1
                                                height:parent.height
                                                color:"#565656"
                                            }
                                            Rectangle{
                                                width: 2
                                                height: 2
                                                radius: 1
                                                color:"#565656"
                                                anchors.centerIn: parent
                                            }

                                            color:"#fafa33"
                                            x:{
                                                return parent.width-width-1;
                                            }

                                            visible: datasModel.get(index).mode===2;
                                            enabled: datasModel.get(index).mode===2
                                            MouseArea{
                                                anchors.fill: parent
                                                drag.target: parent
                                                drag.axis: Drag.XAxis
                                                drag.maximumX: canvas1.width-50
                                                drag.minimumX: 0
                                                onPositionChanged: {
                                                    tagItem.width=parent.x+parent.width+1;
                                                    datasModel.setProperty(index,"length",tagItem.width);
                                                }
                                            }

                                        }
                                    }
                                }

                                onPaint: {
                                    PPainter.drawTimeShaft(canvas1,music_duration)
                                }
                            }
                        }

                        Rectangle{
                            width: music_pad_width+100
                            height: flic.height-80
                            anchors.bottom: parent.bottom
                            color:"#303030"
                            z:1
                            Canvas{
                                Rectangle{
                                    width: 1
                                    height: parent.height
                                    color:"#fa7766"
                                    x:current_position+50
                                }

                                id:canvas2
                                anchors.fill: parent
                                onPaint: {
                                    PPainter.drawTimeTag(canvas2,music_duration)
                                }
                            }

                            Rectangle{
                                width: 1
                                height:parent.height
                                color:"#dfaa45"
                                x:50+current_position
                                id:posSeeker
                                z:10

                                Rectangle{
                                    width: 30
                                    height: 15
                                    y:25
                                    color:"#12aadf"
                                    border.width: 1
                                    border.color: "#565656"
                                    radius: 2
                                    x:-width/2
                                    MouseArea{
                                        anchors.fill: parent
                                        drag.target: posSeeker

                                        drag.maximumX: pad.width-50
                                        drag.minimumX: 0
                                        drag.axis: Drag.XAxis
                                        onPositionChanged: {
                                            current_position=posSeeker.x-50;
                                            var ms=current_position*music_duration*1000/music_pad_width
                                            AudioData.seekPosition(ms);
                                            AudioData.pauseMusic();
//                                            playbnt.source="qrc:/imgs/play.png";
                                            playinyState=false;
                                        }
                                    }
                                }
                            }

                        }
                    }
                }

                //delete all bnt
                Rectangle{
                    anchors.right: parent.right
                    anchors.rightMargin: 20
                    width: 50
                    height: 50
                    radius: 25
                    border.width: 1
                    border.color: "#565656"
                    y:20
                    Text{
                        text:"清空"
                        anchors.centerIn: parent
                        font.pointSize: 15
                        color:"#454545"
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            datasModel.clear();
                        }
                    }
                }

            }

            //场景
            Rectangle{
                width: root.width
                height:root.height/2
                color:"#99a066"

                Item{
                    width: 1200
                    height: music_duration*1000+500
                    clip:true
                    id:padroot
                    transform: Rotation {
                        origin.x: padroot.width/2;
                        origin.y: padroot.height;
                        axis { x: 1; y: 0; z: 0 }
                        angle: 50 }
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.bottom: parent.bottom

                    //游标线
                    Rectangle{
                        anchors.bottom: parent.bottom
                        anchors.bottomMargin: 500+2
                        width: parent.width
                        height:4
                        color:"#ee3310"
                    }

                    //梯形场景
                    Rectangle{
//                        y:current_position*20
                        y:0
                        width:parent.width
                        height:music_duration*1000
                        id:musicPad
                        color:"#44000000"
                        Connections{
                            target: mainwin
                            onPlayinyStateChanged:{
                                if(playinyState){
                                    musicPadAnimator.stop();
                                    musicPad.y=musicPad.height;
                                    musicPadAnimator.duration=music_duration*1000-AudioData.position;
                                    musicPadAnimator.from=current_position*20;;
                                    musicPadAnimator.to=musicPad.height;
                                    musicPadAnimator.restart();
                                }
                                else{
                                    musicPadAnimator.stop();
                                    musicPad.y=current_position*20;
                                    musicPadAnimator.duration=50;
                                    musicPadAnimator.from=musicPad.y;
                                    musicPadAnimator.to=current_position*20;
                                    musicPadAnimator.restart();
                                }
                            }
                        }
                        //校正计时器，由于qml的计时器始终不知道啥情况会慢了起来，需要重新校正
//                        Timer{
//                            id:correctTimer
//                            interval: 5000
//                            running: playinyState
//                            repeat: true
//                            onTriggered: {
//                                musicPadAnimator.stop();
//                                musicPad.y=musicPad.height;
//                                musicPadAnimator.duration=music_duration*1000-AudioData.position;
//                                musicPadAnimator.from=current_position*20;;
//                                musicPadAnimator.to=musicPad.height;
//                                musicPadAnimator.restart();
//                            }
//                        }

                        NumberAnimation on y {
                            from: musicPad.y;
                            to: musicPad.height
                            id:musicPadAnimator
                            running:false
                        }

                        MouseArea{
                            anchors.fill: parent
                            drag.target: musicPad
                            drag.axis: Drag.YAxis
                            drag.minimumY: 0
                            drag.maximumY: music_duration*1000
                            onPressed: {
                                current_position=(musicPad.y)/20;
                                var ms=current_position*music_duration*1000/music_pad_width
                                AudioData.seekPosition(ms);
                                AudioData.pauseMusic();
//                                            playbnt.source="qrc:/imgs/play.png";
                                playinyState=false;
                            }

                            onPositionChanged: {
//                                current_position=posSeeker.x-50;
                                current_position=(musicPad.y)/20;
                                var ms=current_position*music_duration*1000/music_pad_width
                                AudioData.seekPosition(ms);
                                AudioData.pauseMusic();
//                                            playbnt.source="qrc:/imgs/play.png";
                                playinyState=false;
                            }
                            onReleased: {
                                current_position=(musicPad.y)/20;
                                var ms=current_position*music_duration*1000/music_pad_width
                                AudioData.seekPosition(ms);
                                AudioData.pauseMusic();
//                                            playbnt.source="qrc:/imgs/play.png";
                                playinyState=false;
                            }
                        }

                        Behavior on y{
                            PropertyAnimation{
                                properties: "y"
                                duration: 60
                            }
                        }

                        Column{
                            spacing: 1000-3
                            height:parent.height
                            anchors.centerIn: parent
                            Repeater{
                                model: music_duration
                                delegate: Rectangle{
                                    width: musicPad.width
                                    height: 3
                                    color:"#aa000000"
                                    Text{
                                        anchors.centerIn: parent
                                        text:""+(Math.floor(music_duration)-index)+"s"
                                        font.pointSize: 120
                                        color:"#33eeff12"
                                    }
                                }
                            }
                        }

                        Repeater{
                            model: datasModel
                            delegate: Rectangle{
                                width: 150
                                height: 60
                                id:spot
                                radius: height/2
                                color:spot.y+30<=musicPad.height-musicPad.y?
                                          "#99ee12":"#99000000"
                                border.width: selected?6:0
                                border.color: "#12eeaa"
                                x:pindex*300+75
                                y:(music_duration-(pos*20)/1000)*musicPad.height/music_duration-30
                                z:selected?2:1

//                                ColorAnimation on color{
//                                    from: "#99ffffff"
//                                    to: "#99000000"
//                                    duration: 500
//                                    id:colorAnimator
//                                    Component.onCompleted: start();
//                                }
//                                Timer{
//                                    interval: 20
//                                    running: true
//                                    repeat: true
//                                    onTriggered: {
//                                        if(Math.abs((musicPad.height-musicPad.y)-(spot.y+30))<=20)
//                                            colorAnimator.start();
//                                    }
//                                }

                                Rectangle{
                                    anchors.top: parent.bottom
                                    anchors.topMargin: 20
                                    width: 80
                                    height:60
                                    radius: height/2
                                    visible: selected
                                    color:"#ee6612"
                                    anchors.horizontalCenter: parent.horizontalCenter
                                    Rectangle{
                                        width: 3
                                        height: 20
                                        color:parent.color
                                        anchors.horizontalCenter: parent.horizontalCenter
                                        anchors.bottom: parent.top
                                    }

                                    Text{
                                        anchors.centerIn: parent
                                        color:"#ffffff"
                                        text:"delete"
                                        font.pointSize: 15
                                    }

                                    MouseArea{
                                        anchors.fill: parent
                                        onClicked: {
                                            datasModel.remove(index);
//                                            spot.deleteLater();
                                        }
                                    }
                                }

                                MouseArea{
                                    anchors.fill: parent
                                    drag.target: spot
                                    drag.minimumY: 0
                                    drag.maximumY: music_duration*1000
                                    drag.axis: Drag.YAxis
                                    onClicked: {
                                        for(var a=0;a<datasModel.count;a++){
                                            datasModel.setProperty(a,"selected",false);
                                        }
                                        datasModel.setProperty(index,"selected",true);
                                    }
                                    onPressed: {
                                        for(var a=0;a<datasModel.count;a++){
                                            datasModel.setProperty(a,"selected",false);
                                        }
                                        datasModel.setProperty(index,"selected",true);
                                    }

                                    onReleased: {
                                        datasModel.setProperty(index,"pos",50*(music_duration-(spot.y+30)*music_duration/musicPad.height));
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}
